<template>
    <view class="content">
        <!-- 搜索+轮播图 -->
        <view class="search-banner" :style="{ backgroundImage: `url(${public_img}/img/backHome.png)` }">
            <!-- 自定义导航栏 -->
            <view class="custom-nav-bar"
                :style="{ height: customNavBarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
                <view class="search-bar" @tap="goToSearchPage">
                    <input type="search" placeholder="请输入搜索内容" v-model="searchKeyword" @confirm="handleSearch" />
                    <view class="search-icon" @tap.stop="goToSearchPage">
                        <uni-icons type="search" size="20" color="#999999"></uni-icons>
                    </view>
                </view>
            </view>

            <!-- 轮播图 -->
            <view class="swiper-box">
                <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                    :duration="duration" indicator-color="#e0e0e0" indicator-active-color="#ff8d1a" circular>
                    <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
                        <image :src="item.img" :alt="item.title" mode="aspectFill"></image>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <!-- 分类列表横向滚动 -->
        <view class="category-scroll-section" v-if="categoryList.length > 0">
            <view class="category-icons-wrapper">
                <!-- 第一排 -->
                <view class="category-row">
                    <view class="category-item" v-for="(item, index) in categoryList.slice(0, 5)"
                        :key="item.id || index" @click="goToCategory(item)">
                        <view class="category-icon-box" :class="'category-bg-' + (index % 5)">
                            <image class="category-icon-img" :src="item.img" mode="aspectFit"></image>
                        </view>
                        <text class="category-text">{{ item.title }}</text>
                    </view>
                </view>
                <!-- 第二排 -->
                <view class="category-row" v-if="categoryList.length > 5">
                    <view class="category-item" v-for="(item, index) in categoryList.slice(5, 10)"
                        :key="item.id || (index + 5)" @click="goToCategory(item)">
                        <view class="category-icon-box" :class="'category-bg-' + ((index + 5) % 5)">
                            <image class="category-icon-img" :src="item.img" mode="aspectFit"></image>
                        </view>
                        <text class="category-text">{{ item.title }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 热门专区 -->
        <view class="hot-zone">
            <image :src="public_img + '/img/home1.png'" mode="scaleToFill" />
            <view class="hot-zone-item">
                <image style="margin-bottom: 20rpx;" :src="public_img + '/img/img16991418abc41b368.png'"
                    mode="aspectFill"></image>
                <image :src="public_img + '/img/img16991518abc41da78.png'" mode="scaleToFill" />
            </view>
        </view>

        <!-- 热销商品 -->
        <view class="hot-products">
            <view class="section-title">
                <image :src="public_img + '/img/hott.png'" mode="scaleToFill" style="width:23px;height: 23px;" />
                热销商品
            </view>
            <view class="waterfall-container">
                <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                    <view class="product-item-waterfall" v-for="(item, index) in column" :key="index"
                        @click="goToProductDetail(item)">
                        <image :src="item.img" mode="widthFix"></image>
                        <view class="product-info-waterfall">
                            <view class="product-title">{{ item.title }}</view>
                            <view class="product-synopsis">{{ item.synopsis }}</view>
                            <view class="product-price">
                                <text class="price">¥{{ item.price }}</text>
                                <text class="original-price">¥{{ item.original_price }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 设置空标签称其下方区域占位 -->
        <view style="height: 100rpx;"></view>

        <!-- 无数据提示 -->
        <view v-if="!productList.length && !loading" class="no-data">
            <text>暂无商品数据</text>
        </view>
    </view>
</template>

<script>
// 引入全局配置
import { public_img } from "@/static/public.js";
// 引入首页相关接口
import { homeApi } from "@/api/indexAPI.js";

export default {
    data() {
        return {
            public_img: public_img, // 将全局变量注入到data中以便在模板中使用
            title: "首页",
            statusBarHeight: 0, // 状态栏高度
            customNavBarHeight: 44, // 自定义导航栏高度（包括状态栏）
            indicatorDots: true,
            autoplay: true,
            interval: 5000,
            duration: 500,
            loading: true,
            searchKeyword: '', // 搜索关键词
            // 轮播图数据
            swiperList: [
                { img: public_img + '/img/home.jpg' },
                { img: public_img + '/img/home.jpg' },
                { img: public_img + '/img/home.jpg' }
            ],
            // 分类列表数据
            categoryList: [],
            // 商品列表数据
            productList: [],
            // 瀑布流列数
            waterfallColumnCount: 2,
            // 瀑布流列数据
            waterfallColumns: [[], []],
            isNavigating: false, // 是否正在跳转（防止重复跳转）
            public_img: public_img
        };
    },
    onLoad() {
        console.log("首页onLoad执行");
        // 获取设备状态栏高度
        this.getStatusBarHeight();
        // 页面加载时检查用户登录状态
        const isLoggedIn = this.checkLoginStatus();
        // 只有在用户已登录的情况下才获取首页数据
        if (isLoggedIn) {
            // 获取首页数据
            this.getHomeData();
        }
    },
    onShow() {
        // 重置跳转标志位，确保返回后可以再次跳转
        this.isNavigating = false;
        // 记录当前TabBar页面（用于打卡页面返回时知道来源）
        uni.setStorageSync('currentTabBarPage', '/pages/index/index');
    },
    methods: {
        // 获取设备状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
                // 设置自定义导航栏总高度（状态栏高度 + 导航栏主体高度）
                this.customNavBarHeight = this.statusBarHeight + 74;
            } catch (err) {
                console.error("获取状态栏高度失败", err);
            }
        },

        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots;
        },

        changeAutoplay(e) {
            this.autoplay = !this.autoplay;
        },

        intervalChange(e) {
            this.interval = e.target.value;
        },

        durationChange(e) {
            this.duration = e.target.value;
        },

        checkLoginStatus() {
            try {
                // 从本地存储中获取token和uid
                const token = uni.getStorageSync("token");
                const uid = uni.getStorageSync("uid");
                console.log("获取到的token:", token, "uid:", uid);

                // 如果没有token，则跳转到登录页面
                if (!token || !uid) {
                    console.log("未登录，准备跳转到登录页面");
                    this.logoutAndRedirect("请先登录");
                    return false; // 返回false表示未登录
                } else {
                    console.log("用户已登录");
                    return true; // 返回true表示已登录
                }
            } catch (err) {
                console.error("检查登录状态失败", err);
                this.logoutAndRedirect("登录状态异常，请重新登录");
                return false; // 返回false表示未登录
            }
        },

        // 退出登录并跳转到登录页面
        logoutAndRedirect(message = "登录已过期，请重新登录") {
            try {
                // 清除所有相关的本地存储数据
                uni.removeStorageSync("token");
                uni.removeStorageSync("uid");
                uni.removeStorageSync("userInfo");
                // 可以根据需要清除其他缓存数据

                uni.showToast({
                    title: message,
                    icon: "none",
                    duration: 1500
                });

                // 延迟跳转以显示提示信息
                setTimeout(() => {
                    // 使用redirectTo跳转到登录页面
                    uni.redirectTo({
                        url: "/pages/login/index",
                        fail: (err) => {
                            console.error("跳转到登录页面失败:", err);
                        }
                    });
                }, 1500);
            } catch (err) {
                console.error("退出登录过程出错:", err);
            }
        },

        // 获取首页数据
        getHomeData() {
            this.loading = true;
            console.log("开始调用首页数据接口");

            // 使用封装好的API接口
            homeApi
                .getHomeData()
                .then((res) => {
                    this.loading = false;
                    console.log("首页接口请求成功，返回数据:", res);

                    // 检查是否是下线通知 (code=3 且 msg="下线通知")
                    if (res && res.code === 3 && res.msg === "下线通知") {
                        console.log("收到下线通知，准备跳转到登录页面");
                        this.logoutAndRedirect("您的账号已在其他设备登录，请重新登录");
                        return;
                    }

                    if (res.code === 1 && res.data) {
                        console.log("数据解析成功");

                        // 设置轮播图数据
                        if (res.data.swiper && Array.isArray(res.data.swiper) && res.data.swiper.length > 0) {
                            this.swiperList = res.data.swiper.map(item => ({
                                ...item,
                                img: item.img && item.img.startsWith('http') ? item.img : (public_img + (item.img || '/img/home.jpg'))
                            }));
                        } else {
                            // 如果没有轮播图数据，保持默认数据
                            console.log("没有轮播图数据，使用默认数据");
                        }
                        console.log("轮播图数据:", this.swiperList);

                        // 设置分类列表数据（横向滚动）
                        if (res.data.type && Array.isArray(res.data.type) && res.data.type.length > 0) {
                            this.categoryList = res.data.type.map(item => ({
                                ...item,
                                img: item.img && item.img.startsWith('http') ? item.img : (public_img + (item.img || '/img/my.png'))
                            }));
                        } else {
                            // 如果没有分类数据，设置为空数组
                            this.categoryList = [];
                        }
                        console.log("分类列表数据:", this.categoryList);

                        // 设置商品列表数据
                        if (res.data.list && Array.isArray(res.data.list) && res.data.list.length > 0) {
                            this.productList = res.data.list.map(item => ({
                                ...item,
                                img: item.img && item.img.startsWith('http') ? item.img : (public_img + (item.img || ''))
                            }));
                            // 构建瀑布流数据
                            this.buildWaterfallData();
                        } else {
                            // 如果没有商品数据，设置为空数组
                            this.productList = [];
                            this.waterfallColumns = [[], []];
                        }
                        console.log("商品列表数据:", this.productList);
                    } 
                    else if (res.code === 401 || res.code === 403) {
                        // 处理登录过期或未授权的情况
                        console.log("登录已过期或未授权，准备跳转到登录页面");
                        this.logoutAndRedirect("登录已过期，请重新登录");
                    } 
                    else {
                        console.error("首页数据获取失败:", res.msg || "未知错误");
                        uni.showToast({
                            title: res.msg || "数据获取失败",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => {
                    this.loading = false;
                    console.error("首页接口请求失败:", err);

                    uni.showToast({
                        title: "网络请求失败，请检查网络连接",
                        icon: "none",
                    });

                    // 即使请求失败，也要显示默认数据或空状态
                    this.showDefaultData();
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        // 显示默认数据
        showDefaultData() {
            console.log("显示默认数据");
            // 如果没有获取到数据，保持默认数据
            // 这样至少页面不会完全空白
        },

        // 构建瀑布流数据
        buildWaterfallData() {
            // 初始化列数组
            const columns = Array.from({ length: this.waterfallColumnCount }, () => []);

            // 将商品列表按顺序分配到各列
            this.productList.forEach((item, index) => {
                const columnIndex = index % this.waterfallColumnCount;
                columns[columnIndex].push(item);
            });

            // 更新瀑布流列数据
            this.waterfallColumns = columns;
        },

        // 跳转到搜索页面
        goToSearchPage() {
            // 防止重复跳转
            if (this.isNavigating) {
                return;
            }
            this.isNavigating = true;
            
            // 如果有搜索关键词，传递关键词；否则直接跳转
            const keyword = this.searchKeyword.trim();
            const url = keyword 
                ? `/pages/search/index?keyword=${encodeURIComponent(keyword)}`
                : '/pages/search/index';
            
            uni.navigateTo({
                url: url,
                success: () => {
                    // 跳转成功后重置标志
                    this.isNavigating = false;
                },
                fail: () => {
                    // 跳转失败也重置标志
                    this.isNavigating = false;
                }
            });
        },

        // 处理搜索（确认搜索时）
        handleSearch() {
            if (this.searchKeyword.trim()) {
                // 跳转到搜索页面并传递关键词
                this.goToSearchPage();
            } else {
                // 如果没有关键词，直接跳转到搜索页面
                this.goToSearchPage();
            }       
        },

        // 跳转到商品详情
        goToProductDetail(item) {
            console.log('点击商品:', item);
            uni.navigateTo({
              url: `/pages/product/index?id=${item.id}`
            });
        },

        // 跳转到分类页面
        goToCategory(item) {
            console.log('点击分类:', item);
            if (!item || !item.id) {
                uni.showToast({
                    title: '分类信息错误',
                    icon: 'none'
                });
                return;
            }
            // 由于分类页面是TabBar页面，switchTab不支持传参，使用全局存储传递分类ID
            uni.setStorageSync('targetCategoryId', item.id);
            // 跳转到分类页面
            uni.switchTab({
                url: '/pages/type/index'
            });
        },
    }
};
</script>


<style>
.content {
    width: 100%;
    background-color: #FAFAFA;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-bottom: 100rpx;
}

/* 搜索+轮播图 */
.search-banner {
    width: 100%;
    height: 270px;
    background-size: cover;
}

.search-bar {
    width: 100%;
    padding: 15rpx 0;
    box-sizing: border-box;
    margin-top: 36px;
    /* 向下移动搜索框，避免被胶囊按钮覆盖 */
    position: relative;
    height: 60rpx;
}


.search-bar input {
    width: 94%;
    margin: auto;
    height: 60rpx;
    background-color: white;
    border-radius: 30rpx;
    padding: 0 60rpx 0 30rpx;
    /* 右侧留出空间给搜索图标 */
    font-size: 28rpx;
    box-sizing: border-box;
}

/* 搜索图标 */
.search-icon {
    position: absolute;
    right: 40rpx;
    top: 74%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 100%;
}

/* 为胶囊按钮留出空间 */
.custom-nav-bar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15rpx;
    position: relative;
}

/* 轮播图 */
.swiper-box {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    box-sizing: border-box;
}

.swiper {
    height: 300rpx;
    border-radius: 16rpx;
    overflow: hidden;
}

.swiper-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
}

.swiper-item image {
    width: 100%;
    height: 100%;
}

/* 背景图区域 */
.background-section {
    width: 100%;
    height: 200rpx;
    margin-top: 20rpx;
    overflow: hidden;
}

.background-img {
    width: 100%;
    height: 100%;
}

/* 分类列表横向滚动 */
.category-scroll-section {
    margin-top: 15px;
    background-color: #fff;
    border-radius: 5.8px;
    width: 96%;
}

.category-scroll {
    width: 100%;
    white-space: nowrap;
}

.category-row {
    margin-bottom: 20rpx;
}

.category-row:last-child {
    margin-bottom: 0;
}

.category-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20%;
}

.category-item:last-child {
    margin-right: 0;
}

.category-icon-box {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.category-icon-img {
    width: 45px;
    height: 45px;
}

.category-text {
    font-size: 24rpx;
    color: #333;
    text-align: center;
    line-height: 1.2;
}

/* 热门专区 */
.hot-zone {
    width: 94%;
    display: flex;
    height: 180px;
    background-color: white;
    padding: 0.3125rem 0.3125rem;
    margin-top: 10px;
    gap: 5px;
    border-radius: 8px;
}

.hot-zone>image {
    width: 44%;
    height: 180px;
}

.hot-zone-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hot-zone-item image {
    width: 100%;
    flex: 1;
}

/* 热销商品 */
.hot-products {
    width: 100%;
    box-sizing: border-box;
}

.section-title {
    font-size: 16px;
    color: #FF8D1A;
    margin: 8px 0;
    background-color: white;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.product-item {
    display: flex;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.product-item image {
    width: 200rpx;
    height: 200rpx;
}

.product-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.waterfall-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
}

.waterfall-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-right: 15rpx;
}

.waterfall-column:last-child {
    margin-right: 0;
}

.product-item-waterfall {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
    padding: 5px;
}

.product-item-waterfall image {
    width: 100%;
    border-radius: 5.5px;
}

.product-info-waterfall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 14px;
    color: #505050;
    margin-bottom: 3px;
}

.product-synopsis {
    font-size: 13px;
    color: #8b8b8c;
    margin-bottom: 10px;
    flex: 1;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    display: flex;
    align-items: center;
}

.price {
    font-size: 14px;
    color: #ff4757;
    margin-right: 10rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

.category-icons-wrapper {
    padding: 5px 0px 10px 0px;
}

/* 无数据提示 */
.no-data {
    text-align: center;
    padding: 50rpx 0;
    color: #999;
}
</style>